<script setup>
// const prop = defineProps({
//   course: Object,
//   type: String
// })
import {useStore} from "../../pinia/index.js";
import {onMounted, ref} from "vue";
import CourseInfo from "./CourseInfo.vue";
import {get} from "../../util/request.js";
import {useRouter} from "vue-router";
import CommentContent from "../../components/CommentContent.vue";
import SubmitCommit from "../../components/SubmitCommit.vue";

const onClickLeft = () => history.back()
const store = useStore()
const router = useRouter()
const course = store.currentCourse
const courseName = ref('')
//教材表
const materials = ref({})
const loading = ref(true);
const finished = ref(true);
const show = ref(false);
const onClickTab = ()=>{

  // getData();
}
onMounted(()=>{

  get("/material/courseRefmaterial",{courseId:course.courseId}).then(res=>{
    if(res.code==0){
      materials.value=res.data;

      store.setMaterial(materials)
      console.log(materials)
    }else{

    }
  })
})
const enrollment = ()=>{

  console.log("enrollment")
  router.push("/orderAck");

}


const onLoad = () => {
};
const showPopup= ()=>{
  show.value=true;
}
</script>

<template>
  <van-nav-bar
      :title="course.title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />

<van-image :src="course.teacher.profileUrl"></van-image>
  ¥{{course.discountPrice}} <p class="text-decoration: line-through">¥{{course.price}}</p>
<h3>{{course.title}}</h3>
<van-divider></van-divider>
  <van-tabs v-model:active="courseName" @click-tab="onClickTab" sticky>
    <van-tab title="课程反馈" name="1">

      <div class="content">
        <SubmitCommit></SubmitCommit>
<!--        <van-popup v-model="show" position="bottom">-->
<!--          <van-cell title="评论区" />-->
<!--        </van-popup>-->
        <CommentContent v-model="show" :courseId="1"></CommentContent>


      </div>

<!--      <CommentContent v-model="show"></CommentContent>-->
      <h1 style="background-color: red">赠送教材</h1>
      <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
        <div v-for="material in materials">
          <h3>{{material.title}}</h3>
          <van-image
              width="10rem"
              height="10rem"
              fit="cover"
              position="left"
              :src="material.imageUrl"
          />
          <h6> {{material.description}}</h6>
        </div>

        <!--    <van-cell v-for="material in materials" :key="material" :title="material" >-->
        <!--      {{material.title}}  <br>-->
        <!--      {{material.description}}-->
        <!--&lt;!&ndash;      <img :src="material.imageUrl">&ndash;&gt;-->
        <!--    </van-cell>-->
      </van-list>

      <div class="bottom-bar">
        <van-row >
          <van-col span="12">
            <van-button type="primary" size="large" color="#c4aeae">在线咨询</van-button>
          </van-col>
          <van-col span="12">
            <van-button type="primary" size="large" color = "#ffd24d" @click="enrollment()">在立即报名</van-button>
          </van-col>
        </van-row>
      </div>

      <h3>总共{{materials.length}}本教材</h3>

      <CourseInfo></CourseInfo>
    </van-tab>
    <van-tab title="老师简介" name="2">老师简介</van-tab>
    <van-tab title="课程详情" name="3">建筑艺术</van-tab>
  </van-tabs>


<!--  <div class="bottom-bar">-->
<!--    <van-button type="primary">在线咨询</van-button>-->
<!--    <van-button type="primary">在立即报名</van-button>-->
<!--  </div>-->

  <van-back-top />
</template>

<style scoped>
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>